<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<BulletOnRails4NET.Controllers.GridHelper>" %>

<%@ Import Namespace="BulletOnRails4NET.Controllers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    List
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <link rel="stylesheet" type="text/css" media="screen" title="basic" href="<%= PathResolver.GetSiteRoot() + "content/themes/basic/grid.css" %>" />
    <link type="text/css" rel="stylesheet" href="<%= PathResolver.GetSiteRoot() + "Scripts/css/jquery.flexbox.css" %>" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <script type="text/javascript" src="<%= PathResolver.GetSiteRoot() + "Scripts/ListLogic.js" %>"></script>

    <script type="text/javascript" src="<%= PathResolver.GetSiteRoot() + "Scripts/ckeditor/ckeditor.js" %>"></script>

    <style>
        .edit_form_field
        {
            float: none;
        }
    </style>

    <script type="text/javascript">
        
        
function create_htmleditor_field(field_id, field_name, width) {
    return '<div style="clear:left" />' + "<textarea id=\"" + field_id +
            "\" name=\"" + field_name +
            "\" rows=\"20\" cols=\"50\" ></textarea>" + '<div style="clear:left" />';
}
_custom_html_fields['Html'] = create_htmleditor_field;

function load_ck_editor_data()
{
	var editor_data = CKEDITOR.instances.Html_field.getData();
	$("#Html_field").val(editor_data);
}
_before_form_submit_callback = load_ck_editor_data;

        $(document).ready(function() {

            jqGridInclude();
            clear_fields_on_new = <%= Model.clear_fields_on_new.ToString().ToLower() %>;
            $.getJSON("<%= Model.assoc_data_url %>", null, function(data) {
                possible_values_for_assocs =  data;
                
                //Added this instead of doing extra ajax call
                data = {"colModel":[{"name":"ID","width":21,"index":"ID"},
                {"name":"Title","width":90,"index":"Title"},
                {"name":"Html","width":90,"index":"Html", hidden: true},
                {"name":"Div ID","width":90,"index":"DivID"},
                {"name":"Page ID","width":56,"index":"PageID"}],
                "colNames":["ID","Title","Html","Div ID","Page ID"],"editFieldsModel":[{"name":"ID","width":21,"index":"ID"},{"name":"Title","width":90,"index":"Title"},{"name":"Html","width":90,"index":"Html"},{"name":"Div ID","width":90,"index":"DivID"},{"name":"Page ID","width":56,"index":"PageID"}]};
                
				//$.getJSON("<%= Model.grid_metadata_url %>", null, function(data) {
					col_names = data.colNames;
					col_model = data.colModel;
					edit_fields_model = data.editFieldsModel;
					setup_grid('<%= Model.grid_data_url %>', 
					<%= Model.grid_rows_per_page %>,
					'<%= PathResolver.GetSiteRoot() + "content/themes/basic/images" %>',
					'<%= Model.grid_title %>');
					
                    CKEDITOR.replace('Html');
				//});
            });        
        });

        
    </script>

    <script type="text/javascript" src="<%= PathResolver.GetSiteRoot() + "Scripts/jquery.jqGrid.js" %>"></script>

    <script type="text/javascript" src="<%= PathResolver.GetSiteRoot() + "Scripts/jquery.form.js" %>"></script>

    <h2>
        Create, Update, List and Delete
        <%= Model.grid_title %></h2>
    <form id="details_form" action="#" method="post">
    <div class="validation-summary-errors" id="error_messages">
    </div>
    <div id="details_form_fields">
    </div>
    <input type="hidden" value="" id="ids_to_change" name="ids_to_change" />
    <input type="reset" value="Clear the Form" />
    |
    <button id="save_new_form_btn" name="SaveNewForm">
        Save as New Record</button>
    |
    <button id="save_form_btn" name="SaveForm">
        Save to Current Record</button>
    <button id="save_form_multiple_btn" name="SaveMultipleForm">
        Save to Selected Records</button>
    </form>
    <form id="crud_grid" action="delete" method="get">
    <table id="list" class="scroll">
    </table>
    <div id="pager" class="scroll" style="text-align: center;">
    </div>
    </form>
    <form id="delete_form" action="delete" method="post">
    <input type="hidden" name="ids_to_delete" id="ids_to_delete" />
    <button id="delete_btn">
        Delete All the Selected Records</button>
    </form>
    <div id="crud_operation_output">
    </div>
</asp:Content>
